<template lang="jade">
  div.edit_workout_panel
    div.left_panel(@click="panelClicked", v-bind:class="{active: isLeftPanel}", data-panel="left")
      Program_workout_candidates(v-bind:candidates="filterCandidates", v-bind:optionButtonClick="optionButtonClick")
    div.right_panel(@click="panelClicked", v-bind:class="{active: !isLeftPanel}", data-panel="right")
      Program_workout_selected
    div.option_panel(v-show="filterON")
      Program_workout_filter(v-bind:filters="filters", v-bind:onClickFilter="onClickFilter")
</template>
<script>
/*global $*/
import Vue from 'vue'
import Program_workout_candidates from './program_workout_candidates.vue'
import Program_workout_selected from './program_workout_selected.vue'
import Program_workout_filter from './program_workout_filter.vue'

import {mapActions, mapMutations, mapState} from 'vuex'
import Util from '../Util/util.js'
import _ from 'lodash'

export default {
  methods: {
    ...mapActions(['loadWorkouts']),
    ...mapMutations(['UPDATE']),
    async init() {
      let path = this.$route.path;
      let currProgramId;
      let currProgram;
      if(path.split('/')[1] === 'edit') {
        currProgramId = parseInt(path.split('/')[2], 10);
        currProgram = _.find(this.programs, ['id', currProgramId])
      }
      let {workouts, program} = await this.loadWorkouts(this.baseProgramId || currProgramId);

      this.$store.commit('UPDATE', {
        key: 'workouts',
        value: workouts
      })

      // set workouts to program
      if(program) {
        let objWorkouts = Util.convertIdListToObjList(program.workouts, workouts)
        this.$store.commit('UPDATE', {
          key: 'program',
          value: Object.assign({}, currProgram || this.program, {
            workouts: objWorkouts
          })
        })
      }

      // init filters
      const context = this;
      let types = {}
      let tags = {}
      this.workouts.forEach(item => {
        types[item.type] = false
        item.tag.forEach(tagName => {
          tags[tagName] = false;
        })
      });
      Vue.set(context.filters, 'types', types)
      Vue.set(context.filters, 'tags', tags)
    },

    panelClicked(event) {
      this.isLeftPanel = event.currentTarget.dataset.panel === 'left';
      this.filterON = false;
    },

    optionButtonClick() {
      this.filterON = true
    },

    onClickFilter(filterName, filterType) {
      let filter = {}
      filter[filterName] = !this.filters[filterType][filterName];
      Vue.set(this.filters, filterType, Object.assign({}, this.filters[filterType], filter))
    }
  },
  computed: {
    ...mapState(['baseProgramId', 'workouts', 'programs', 'program'])
  },
  props: [],
  watch: {
    filters: {
      handler: function(val, oldVal) {
        this.hasFilter = Object.entries(this.filters).some(item => {
          return Object.entries(item[1]).some(filter => filter[1])
        });

        if(this.hasFilter) {
          this.filterCandidates = this.workouts.filter(item => {
            let isInTag = false
            let isInType = false

            isInTag = item.tag.some(tagName => this.filters.tags[tagName])
            isInType = this.filters.types[item.type]

            return isInTag && isInType
          })
        } else {
          this.filterCandidates = this.workouts;
        }
      },
      deep: true
    }
  },
  components: { Program_workout_candidates, Program_workout_selected, Program_workout_filter },
  events: {},
  data() {
    return {
      isLeftPanel: true,
      filterCandidates: [],
      filters: {},
      filterON: false,
      hasFilter: false
    }
  },
  mounted() {
    this.init();
  }
}
</script>
<style scoped>
.edit_workout_panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.left_panel {
  width: 75%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 10;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  background-color: #f0f0f0;
}

.right_panel {
  width: 75%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 10;
  box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.5);
  background-color: #f0f0f0;
}

.option_panel {
  /* display: none; */
  width: 75%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 101;
  background-color: #ffffff;
  box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.5);
}

/* .show {
  display: block;
} */

.active {
  z-index: 100;
  background-color: #ffffff;
}
</style>
